<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${system}/static/css/home.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${system}/static/css/mui.min.css" rel="stylesheet"/>
    <link href="${system}/static/css/mui.css"/>
    <link href="${system}/static/css/feedback.css" rel="stylesheet" type="text/css"/>

</head>
<style>
    body {
        border: 0;
        margin: 0;
        background: #ebebeb;
    }

    html {
        font-family: '微软雅黑';
    }

    img {
        display: block;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    .box {
        width: 94%;
        margin: 0 auto;
    }
</style>
<body style="background:#fff;">


<div style="margin-top:56px;">
    <div class="box">
        <div class="lo_1 lo_2">
            <span>手机号:</span>
            <input type="text" maxlength="11" id="phoneNumber" placeholder="请输入手机号"
                   style="width:200px; height: 25px; margin-top: 11px; border: none;">
        </div>
    </div>
    <div class="box">
        <div class="lo_1 lo_2">
            <span>验证码:</span>
            <input type="text" maxlength="6" placeholder="6位验证码" id="code"
                   style="width:110px; height: 25px; margin-top: 11px; border: none;">
            <input type="button" id="v_code" id="btn" class="btn_mfyzm" value="获取验证码"
                   style="float:right;margin-top:5px;width: 100px;"/>
        </div>
    </div>
    <div class="box">
        <div class="lo_1 lo_2">
            <span>密码:</span>
            <input type="password" maxlength="16" id="password1" placeholder="请输入6-16位字符"
                   style="width:200px; height: 25px; margin-top: 11px; border: none;">
        </div>
    </div>
    <div class="box">
        <div class="lo_1 lo_2">
            <span>确认密码:</span>
            <input type="password" maxlength="16" id="password2" placeholder="请再次输入密码"
                   style="width:200px; height: 25px; margin-top: 11px; border: none;">
        </div>
    </div>

    <div class="mui-content-padded">
        <a href="#" class="lo_login" id="register" style="margin-top:30px;color: white;">注册</a>
    </div>

</div>

<script src="${system}/static/js/mui.min.js"></script>
<script src="${system}/static/js/mui.js"></script>
<script type="text/javascript">
</script>
<script>
    var v_phoneNumber = /^1[34578]\d{9}$/; //手机号表达式
    var v_code = /^(\d){6}$/;	//验证码表达式
    var wait = 60;	//停止时间
    var v_pwd = /^[\w_-]{6,16}$/;	//密码正则表达式


    $("#v_code").click(function () {
        if (v_phoneNum()) {
            var phoneNumber = $("#phoneNumber").val();	//手机号
            ajax("${system}/message/sendRegisterMsg", {"phone": phoneNumber}, "text", "post", true, function (data) {
                switch (data) {
                    case "success":
                        //验证码发送成功
                        myTime();
                        mui.toast('验证码发送成功!');
                        break;
                    case "frequently":
                        mui.toast('您在一小时中操作过于频繁,请一小时后再试!');
                        //一小时内操作频繁
                        break;
                    case "limit":
                        mui.toast('您在一天中操作过于频繁,请明天再试!');
                        //一天内操作频繁
                        break;
                    case "fail":
                        mui.toast('验证码发送失败!');
                        //验证码发送失败
                        break;
                    case "exist":
                        mui.toast('您已注册,无需再次注册!');
                        //用户已存在
                        break;
                    default:
                        mui.toast('发送验证码时出现问题,请稍后再试!');
                        //服务端发生异常,不能发送
                        break;
                }
            }, function (error) {
                console.log(error);
                mui.toast('请检查你的网络设置!');
            });
        }
    });


    var time = 0;
    $("#register").click(function () {
        //判断计时器是否处于关闭状态
        if (time == 0) {
            time = 10; //设定间隔时间（秒）
            //启动计时器，倒计时time秒后自动关闭计时器。
            var index = setInterval(function () {
                time--;
                if (time == 0) {
                    clearInterval(index);
                }
            }, 1000);
            var phoneNumber = $("#phoneNumber").val();	//手机号
            if (!v_phoneNumber.test(phoneNumber)) {
                mui.toast('请输入手机号!');
                return;
            }
            var code = $("#code").val();	//验证码
            if (!v_code.test(code)) {
                mui.toast('验证码格式错误!');
                return;
            }
            var password1 = $("#password1").val();	//第一次密码
            var password2 = $("#password2").val();	//第二次密码
            if ((!v_pwd.test(password1)) || (!v_pwd.test(password2))) {
                mui.toast('密码格式错误!');
                return;
            } else if (password1 != password2) {
                mui.toast("两次密码输入不一致");
                return;
            }
            //程序执行到此处说明以上要求全部符合,接下来该判断验证码是否正确
            ajax("${system}/user/register.do", {
                "user_number": phoneNumber,
                "user_password": hex_md5(password2).toUpperCase(),
                "massageCode": code
            }, "text", "post", true, function (data) {
                switch (data) {
                    case "success":
                        //注册成功
                        mui.alert("恭喜你,注册成功!", "提示", "OK", function () {
                            window.location.href = "${system}/user/login";
                        });
                        break;
                    case "fail":
                        //注册失败
                        mui.toast('注册失败!');
                        break;
                    case "mismatch":
                        //验证码错误
                        mui.toast('验证码不匹配!');
                        break;
                    default:
                        //异常
                        mui.toast('注册时出现问题,请稍后再试!');
                        break;
                }
            }, function (error) {
                console.log(error);
                mui.toast('请检查你的网络设置!');
            });
        } else {
            mui.alert("不得重复提交多次!", "提示", "OK");
        }
    });


    //验证码计时器
    function myTime() {
        if (wait == 0) {
            $("#v_code").attr("disabled", false);
            $("#v_code").val("获取验证码");
            wait = 60;
            return;
        } else {
            wait--;
            $("#v_code").attr("disabled", true);
            $("#v_code").val("重新发送(" + wait + ")");
            setTimeout(function () {
                myTime();
            }, 1000);
        }
    }


    //验证手机号
    function v_phoneNum() {
        var phoneNumber = $("#phoneNumber").val();	//手机号
        if (!v_phoneNumber.test(phoneNumber)) {
            mui.toast('手机号格式错误!');
            return false;
        }
        return true;
    }
</script>
</body>

</html>